<template>
   <div v-if="comment" class="comment-item">    
    <user-avatar class="comment-avatar" :src="comment.member.avatar" @click="handleSpace(comment.member.mid)"></user-avatar>
    <div class="comment-content">
      <div class="comment-head">
        <div>
          <span class="comment-name"  @click="handleSpace(comment.member.mid)">
            <span :class="{vip: comment.member.vip.vipStatus > 0}">{{ comment.member.uname }}</span>
            <span class="level" :class="'level'+comment.member.level_info.current_level">
              <i class="fa" :class="'fa-level-'+comment.member.level_info.current_level"></i>
            </span>
          </span>
          <span class="comment-time">{{ commentTime }}</span>
        </div>
        <div>
          <span class="comment-like">
            <i class="fa fa-nice"></i> {{ commentLike }}
          </span>
        </div>
      </div>
      <div class="comment-body" v-html="commentContent"></div>
      
      <div v-if="comment.replies !== null && replyShow" class="comment-reply">
        <p v-for="reply in comment.replies" :key="reply.rpid">
          <span class="link" @click="handleSpace(reply.member.mid)">{{reply.member.uname}}：</span>
          <span class="content" v-html="formatMsg(reply.content)"></span>
        </p>
        <p v-if="comment.rcount > 3"><span class="link" @click="showReply(comment)">共{{comment.rcount}}条回复 <i class="fa fa-dropright"></i></span></p>
      </div>
      
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import UserAvatar from '@/components/Avatar'
import { howLong, formatNumber } from '@/utils'
export default {
    name: 'CommentItem',
    emits: ['select'],
    components: {
      UserAvatar
    },
    props: {
      comment: {
        type: Object
      },
      replyShow: {
        type: Boolean,
        default: true
      }
    },
    setup(props, { emit }) {
      const router = useRouter()
      const commentTime = howLong(props.comment.ctime)
      const commentLike = formatNumber(props.comment.like)

      const formatMsg = value => {
        const { emote, message, members } = value
        let tempText = message
        if (emote) {
          for (const emoji of Object.values(emote)) {
            const { text, url } = emoji
            const formatText = text.replace('[', '\\[').replace(']', '\\]')
            const emoteReg = new RegExp(formatText, 'g')
            tempText = tempText.replace(emoteReg, `<img src="${url}" width="20" height="20" style="vertical-align: middle" />`)
          }
        }
        if (members) {
          for (const member of members) {
            const { uname, mid } = member
            const reg = new RegExp(`@${uname}`, 'g')
            tempText = tempText.replace(reg, `<span style="color:#409EFF" data-name="space" data-params="mid" data-value="${mid}">@${uname}</span>`)
          }
        }
        return tempText
      }

      const commentContent = formatMsg(props.comment.content)

      const showReply = comment =>{
        emit('select', comment)
      }
      const handleSpace = mid => {
        router.push({ name: 'space', params: { mid } })
      }

      return {
        commentTime,
        commentLike,
        commentContent,
        formatMsg,
        handleSpace,
        showReply
      }
    }
}
</script>

<style lang="scss" scoped>
.comment{
    &-item{
      display: flex;
      @include border1px(#e7e7e7, 0 0 1px);
      padding-bottom: 14px;
      margin-top: 21px;
    }
    &-avatar{
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
    &-content{
      flex: 1;
      margin-left: 15px;
    }
    &-head{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &-name{
      display: block;
      font-size: 13px;
    }
    &-time, &-like{
      font-size: 12px;
      color: $color-text-secondary;
    }
    &-body{
      font-size: 13px;
      color: $color-text-primary;
      margin-top: 9px;
      white-space: pre-line;
    }
    &-reply{
      margin-top: 9px;
      padding: 10px;
      background-color: $color-grey;
      color: $color-text-primary;
      border-radius: 4px;
      p {
        margin: 6px 0 0;
        @include max-lines(2);
        font-size: 13px;
        .link{
          color: $color-primary;
        }
        .link,.content{
          vertical-align: middle;
          word-break: break-all;
        }
      }
    }
  }
  .vip{
    color: $theme-color;
  }
   .level{
    vertical-align: middle;
    &0,&1{
      color: #bfbfbf;
    }
    &2{
      color: #95ddb2;
    }
    &3{
      color: #92d175;
    }
    &4{
      color: #ff837c;
    }
    &5{
      color: #ff6c00;
    }
    &6{
      color: #f00;
    }
    .fa {
      font-size: 20px;
    }
  }
</style>